<template>
  <div v-if="dataInfo">
    <div v-for="(item, index) in dataInfo" :key="index">
      <div class="centent-neirongdiv">
        <div class="centent-neirongright">
          <a href="#">
            <div class="centent-neirongdiv1">
              {{ item?.item_info?.article_info.title }}
            </div>
            <div class="centent-neirongdiv2">
              {{ item?.item_info?.article_info.brief_content }}
            </div>
          </a>
          <div class="centent-neirongdiv3">
            <a href="#" class="cententa cententa1">
              {{ item?.item_info?.author_user_info.user_name }}
            </a>
            <span class="cententspan">|</span>
            <a href="#" class="cententa cententa2">
              <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
              {{ item?.item_info?.article_info.view_count }}
            </a>
            <a href="#" class="cententa cententa3">
              <span class="iconfont icon-mtiIcon-caozuo-xiangyou2"></span>
              <span class="num">{{ item?.item_info?.article_info?.digg_count }} </span>
            </a>
            <a href="#"><span class="cententspan2">· · ·</span></a>
            <a href="#" class="cententa4">{{ item?.item_info?.tags[0].tag_name }}</a>
          </div>
        </div>
        <a href="#"> <img :src='getAssetsFile(item?.item_info?.article_info.cover_image)' alt=""
            class="centent-neirongimg"></a>

      </div>
    </div>
  </div>
  
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import { getAssetsFile } from '@/util/utils';
import axios from 'axios';

// 定义响应式数据

const dataInfo = ref(null);

async function fetchData() {
  try {
    const response = await axios.get('http://localhost:3000/api/data');
    dataInfo.value = response.data.data;
    console.log('1', dataInfo.value);

  } catch (error) {
    console.error('请求失败:', error);
  }
}

// 在组件挂载时调用 fetchData 函数
onMounted(() => {
  fetchData();
});
console.log('2', dataInfo.value);

</script>

<style scoped>
@import '../assets/reset1.css';
@import '../assets/index.css';
@import '../assets/iconfont/iconfont.css';
</style>
